<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="/static/interactive_map.js"></script>
        <script src="https://unpkg.com/htmx.org@1.9.12" integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2" crossorigin="anonymous"></script>
    </head>
    <body>
        <img id="img" src="">

        <button hx-on:click="size_up();">+</button>
        <button hx-on:click="size_down();">-</button>

        <button hx-on:click="go_up();">⬆️</button>
        <button hx-on:click="go_down();">⬇️</button>
        <button hx-on:click="go_left();">⬅️</button>
        <button hx-on:click="go_right();">➡️</button>
        
        

        
        <script type="text/javascript">
            start( {{ latitude }} , {{ longitude }})
        </script>

        <style>
            #img {
                width: 50vw;
                height: 50vh;
            }
        </style>
    </body>
</html> 
